import React from 'react';
import ReactECharts from 'echarts-for-react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';

interface ColumnDataItem {
  category: string;
  value: number;
  color?: string;
}

interface CustomColumnChartProps {
  data: ColumnDataItem[];
  title?: string;
  height?: number;
}

const CustomColumnChart = ({ 
  data, 
  title, 
  height = 300
}: CustomColumnChartProps) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  // 默认颜色数组
  const defaultColors = [
    '#1890ff', '#52c41a', '#722ed1', '#faad14', 
    '#f5222d', '#13c2c2', '#eb2f96', '#73d13d'
  ];

  // 处理数据，添加颜色
  const processedData = data.map((item, index) => ({
    ...item,
    itemStyle: {
      color: item.color || defaultColors[index % defaultColors.length]
    }
  }));

  // ECharts 柱状图配置
  const option = {
    title: {
      text: title,
      textStyle: {
        color: theme.textPrimary,
        fontSize: 16,
        fontWeight: '500'
      },
      left: 'center',
      top: 10
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        color: mode === 'dark' ? '#fff' : '#000'
      }
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.category),
      axisLine: {
        lineStyle: {
          color: theme.textSecondary
        }
      },
      axisLabel: {
        color: theme.textSecondary
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: theme.textSecondary
        }
      },
      axisLabel: {
        color: theme.textSecondary
      },
      splitLine: {
        lineStyle: {
          color: mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
        }
      }
    },
    series: [{
      name: title || '数据',
      type: 'bar',
      barWidth: '60%',
      data: data.map((item, index) => ({
        name: item.category,
        value: item.value,
        itemStyle: {
          color: item.color || defaultColors[index % defaultColors.length]
        }
      })),
      itemStyle: {
        borderRadius: [4, 4, 0, 0],
        borderColor: mode === 'dark' ? '#000' : '#fff',
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }],
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    }
  };

  return React.createElement('div', {
    style: { 
      height, 
      position: 'relative',
      padding: '20px',
      background: theme.cardBackground,
      borderRadius: '8px',
      border: `1px solid ${theme.cardBorder}`,
    }
  },
    React.createElement(ReactECharts, {
      option: option,
      style: { height: '100%', width: '100%' },
      theme: mode === 'dark' ? 'dark' : 'light'
    })
  );
};

export default CustomColumnChart;